<template>
	<!-- 创建校友会 -->
	<view class="content">
		<u-form :model="form" ref="uForm" label-width="200">
			<u-form-item label="校友会名称 :" label-width="auto">
				<u-input v-model="form.name" />
			</u-form-item>
			<view class="select">
				<u-form-item label="校友会类型 :" label-width="auto">
					<u-input style="width: 80%;" v-model="val" disabled="true" />
				</u-form-item>
				<view class="select-btn"  @click="show=true" style="width: 19%;">
					请选择
				</view>
			</view>
			<u-select v-model="show" :list="categoryList" @confirm="confirm"></u-select>
		</u-form>
		<view class="createGroup">
			<view class="">
				<view>上传头像：</view>
				<u-upload :action="action" index="1" @on-Success="onSuccess()" max-count="1" name="multipartFile" :max-size="1 * 1024 * 1024" :file-list="fileList"></u-upload>
			</view>
			<view class="">
				<view class="">上传背景：</view>
				<u-upload :action="action" index="2" @on-Success="onSuccess()" max-count="1" name="multipartFile" :max-size="1 * 1024 * 1024" :file-list="fileList"></u-upload>
			</view>
		</view>
		<view class="">
			校友会简介：
		</view>
		<u-input v-model="form.brief" type="textarea" :border="border" height="160rpx" :auto-height="autoHeight" />
		<view class="btns">
			<button class="btn" type="default">取消</button>
			<button class="btn" @click="createAlumni" type="warn">创建</button>
		</view>
	</view>
</template>

<script>
	import {
		create
	} from "@api"
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				show: false,
				action: this.$t.URL.api+'/imgUpload/upload',
				fileList: null,
				form: {
					userId:0,//暂时
					name: '',
					type: '',
					avatarUrl:"",
					bgImg:'',
					brief:'',
					isEnable:1,
					verifyStatus:0
				},
				categoryList: [{
					label: '请选择',
					value: 99
				},{
					label: '行业',
					value: 0
				},
				{
					label: '地方',
					value: 1
				}, {
					label: '院系',
					value: 2
				}],
				val:'',
				token: ""
			};
		},
		computed: {
			...mapState(['USER'])
		},
		methods: {
			
			//图片成功上传后的回调 data为服务器返回的数据
			onSuccess(data, index, lists,name){
				console.log("图片成功上传后的回调data:",data.data[index])
				console.log("图片成功上传后的回调index:",index)
				console.log("图片成功上传后的回调name:",name)
				if(name==1){
					this.form.avatarUrl = data.data[index]
				}
				if(name==2){
					this.form.bgImg = data.data[index]
				}
				//页面上定义的临时存放图片的对象，提示也保存后台返回的图片名称
				// let currentFile = {name: '', url: ''};
				// currentFile.name = JSON.parse(data).name;
				// currentFile.url = JSON.parse(data).imgUrl;
				// //成功上传一个图片就往fileList里面添加一个图片对象
				// this.fileList.push(currentFile);
				// //this.form.pictureUrl为后台图片字段来保存字符串类型的图片集合
				// this.form.pictureUrl = JSON.stringify(this.fileList)
				// //console.log("打印图片List：onSuccess", this.fileList);
			},
			
			confirm(e) {
				let that = this;
				that.form.type = e[0].value;
				if(that.form.type == 0){
					that.val = "行业";
				}else if(that.form.type == 1){
					that.val = "地方";
				}else if(that.form.type == 2){
					that.val = "院系";
				}
				
			},
			createAlumni(){
				console.log("最后信息：",this.form);
				let that = this;
				that.form.userId = this.USER.userInfo.id;
				if(that.USER.token == 2 || that.USER.token == 1 || that.USER.token == ''){
					// 1 是第一次进入，没有数据，2 是已进入并且提交材料，处于待人工认证
					uni.showToast({
						title: '请认证后再来！',
						icon: 'none'
					});
					return false;
				}else if(that.form.name==''){
					uni.showToast({
						title: '请输入校友会名字！',
						icon: 'none'
					});
					return false;
				}else if(that.form.type==''){
					uni.showToast({
						title: '请选择校友会类型！',
						icon: 'none'
					});
					return false;
				}else if(that.form.avatarUrl==''){
					uni.showToast({
						title: '请上传校友会会标！',
						icon: 'none'
					});
					return false;
				}else if(that.form.bgImg==''){
					uni.showToast({
						title: '请上传校友会背景图！',
						icon: 'none'
					});
					return false;
				}else if(that.form.brief==''){
					uni.showToast({
						title: '请输入校友会简介！',
						icon: 'none'
					});
					return false;
				}else{
					var form1 = that.form
					//TODO
					create(
						form1
					).then(res=>{
						uni.showToast({
							title: '成功创建,等待管理员审核！',
							icon: 'none'
						});
						setTimeout(function() {
							uni.navigateBack({
								success: () => {
									let page = getCurrentPages().pop(); //跳转页面成功之后
									if (!page) return;
									page.onLoad();
								}
							})
						}, 2000)
						console.log("创建成功！",res)
					}).catch(res=>{
						console.log("创建失败！",res)
					});
				}
			},
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 10rpx 20rpx;
	}

	.createGroup {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		margin-bottom: 20rpx;
	}

	.btns {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		margin-top: 20rpx;
	}

	.btn {
		width: 30%;
	}

	.select {
		display: flex;
		flex-direction: row;
		justify-content: space-between;

		&-btn {
			height: 110rpx;
			line-height: 110rpx;
		}
	}
</style>
